<template>
	<el-card
		shadow="always"
		:body-style="{ padding: '20px' }"
		style="margin-top: 40px"
	>
		<template #header>
			<el-button
				type="primary"
				size="default"
				icon="ele-Plus"
				@click="toAddSpu"
				:disabled="!category3Id"
				>添加SPU</el-button
			>
		</template>
		<!-- card body -->
		<el-table :data="spuList" border stripe style="margin-bottom: 30px">
			<el-table-column type="index" width="80" label="序号" />
			<el-table-column label="SPU名称" prop="spuName"></el-table-column>
			<el-table-column label="SPU描述" prop="description"></el-table-column>
			<el-table-column label="操作">
				<template v-slot="{ row }">
					<el-button
						type="primary"
						size="small"
						icon="ele-Plus"
						title="添加sku"
						@click="toAddSku(row)"
					></el-button>
					<el-button
						color="#0680d7"
						size="small"
						icon="ele-Edit"
						title="修改spu"
						@click="toUpdateSpu(row)"
					></el-button>
					<el-button
						type="info"
						size="small"
						icon="ele-InfoFilled"
						title="查看sku列表"
						@click="toSkuById(row.id)"
					></el-button>
					<el-button
						type="danger"
						size="small"
						icon="ele-Delete"
						title="删除spu"
						@click="deleteSpu(row.id)"
					></el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination
			v-model:currentPage="page"
			v-model:page-size="limit"
			:page-sizes="[3, 5, 7, 9]"
			:pager-count="7"
			layout="total, sizes, prev, pager, next, jumper"
			:total="total"
		/>


		<el-dialog v-model="isDialog" title="Sku列表">
    <el-table :data="skuList">
      <el-table-column property="date" label="名称" prop="skuName"/>
      <el-table-column property="name" label="价格" prop="price" />
      <el-table-column property="address" label="重量" prop="weight"/>
      <el-table-column property="address" label="默认图片">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" width="120" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
		


	</el-card>
</template>

<script lang="ts" setup>
// 获取接口和类型
import { reqDeleteSpu, reqSpuList, type SpuInfoType } from "@/api/spu";
import { ref, watch } from "vue";
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";
import { ElMessage } from "element-plus";
import { reqByspuId, type SkuInfoListType } from "@/api/sku";

// 定义一个变量 获取spulist
const spuList = ref<SpuInfoType[]>([]);

// 定义页码参数
const page = ref(1);
const limit = ref(5);
const total = ref(100);
// 获取store对象
const categoryStore = useCategoryStore();
const { category3Id } = storeToRefs(categoryStore);
// 封装 获取spulist的函数
const getSpuList = async () => {
	try {
		const res = await reqSpuList(
			page.value,
			limit.value,
			category3Id.value as number
		);
		spuList.value = res.records;
		total.value = res.total;
	} catch (error) {
		ElMessage.error("获取分页列表失败");
	}
};

// 监听三级列表
watch(
	category3Id,
	() => {
		if (category3Id.value === null) {
			//如果三级分类变为null,则清空分页列表
			spuList.value = [];
			total.value = 0;
			return;
		}
		getSpuList();
	},
	{ immediate: true }
);

// 监听页码
watch([page, limit], () => {
	getSpuList();
});

// 删除spu
const deleteSpu = async (id: number) => {
	try {
		await reqDeleteSpu(id);
		getSpuList();
		ElMessage.success("删除成功");
	} catch (error) {
		ElMessage.error("删除失败");
	}
};

// 获取emit
const emit = defineEmits<{
	(event: "changeType", newType: number, row?: SpuInfoType): void;
}>();

// 新增spu
const toAddSpu = () => {
	emit("changeType", 1);
};

// 跳转去skuform
const toAddSku = (row: SpuInfoType) => {
	emit("changeType", 2, row);
};

// 控制sku列表是否显示
const isDialog = ref(false)
// 存放skuList
const skuList = ref<SkuInfoListType>([])
// 去sku详情
const toSkuById = async (id:number) =>{
	isDialog.value = true
	try {
		const res = await reqByspuId(id)
		skuList.value = res
		console.log(res);
		
	} catch (e) {
		ElMessage.error('查看sku详情页失败')
	}
}



// 修改spu
const toUpdateSpu = (row: SpuInfoType) => {
	emit("changeType", 1, row);
};
</script>

<script scoped></script>
